import React from 'react';
import TweenOne from 'rc-tween-one';
import { Link } from 'rc-scroll-anim';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneOpen: false,
    };
  }

  phoneClick = () => {
    const phoneOpen = !this.state.phoneOpen;
    this.setState({
      phoneOpen,
    });
  };

  render() {
    const { isMobile } = this.props;

    const { phoneOpen } = this.state;
    
    return (
      <TweenOne
        component="header"
        animation={{ opacity: 0, type: 'from' }}
        className="header2 home-page-wrapper"
      >
        <div
          className={`home-page${phoneOpen ? ' open' : ''}`}
        >
          <TweenOne
            animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
            className="header2-logo"
          >
            <img width="100%" src="/images/web_title_s1.png" alt="img" />
          </TweenOne>
          {isMobile && (
            <div
              className="header2-mobile-menu"
              onClick={() => {
                this.phoneClick();
              }}
            >
              <em />
              <em />
              <em />
            </div>
          )}
          <div
            className="header2-menu"
            style={isMobile ? { height: phoneOpen ? 'auto' : 0 } : {}}
          >
            <Link
              name="linkNav"
              className="menu-item"
              to="当前页面 ID 地址，参考如上"
            >
              导航名称
            </Link>
          </div>
        </div>
      </TweenOne>
    );
  }
}

export default Header;
